<template>
   <img alt="Vue logo" src="./assets/logo.png">
   <!-- <index></index> -->
   <!-- <reactive></reactive> -->
   <!-- props组件传递跟vue2  没有差别   直接在子组件里面接收数据有不同的方式 -->
   <!-- <props :msg="msg"  @ForEmit="ForEmit"></props> -->
   <!-- <life></life> -->
   <!-- <computed></computed> -->
   <!-- <watch></watch> -->
   <Provide></Provide>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// import Index from './components/index.vue'                           //VUE的setup 返回
// import Reactive from './components/reactive/index'                  //VUE中的reactive 使用
// import Props from  './components/props/index'                      //VUE的props 使用
// import Life from  './components/life/index'                       //VUE的ref另一种用法文本聚焦
// import Computed  from  './components/computed/index'             //计算属性的 computed 
// import Watch from  './components/watch/index'                   //监听器  watch 
import  Provide from  './components/provide - inject/index.vue'       //  Provide - inject  //跨组件通信
export default defineComponent({
  name: 'App',
  components: {
   // Index,
   // Reactive,
   // Props
   // Life
   // Computed
   // Watch
   Provide
  },
  //下面的是Props
//   setup(){
//      const  msg = ref('我是父组件')
//      function ForEmit(value:string){
//         msg.value += value
//      }
//      return {
//         msg,
//         ForEmit
//      }
//   },
  

})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
